<template>
  <el-card>
    <div>
      <div style="margin: 10px 5px">
        <el-page-header @back="gotoIndex" style="font-size: 26px" title="返回首页" content="体检报告查询">
        </el-page-header>
      </div>
      <el-card>
        <div style="margin: 10px 5px">
          <label style="margin-right: 10px; margin-left: 20px">查询预约人：</label>
          <el-input v-model="search" style="width: 30%;" placeholder="请输入预约人名查询"/>
          <el-button style="margin-left: 10px" type="primary" @click="list">查询</el-button>.
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="reportStatus" width="80" label="报告状态" >
            <template slot-scope="scope">
              <el-tag type="danger" v-if="String(scope.row.status) === '1'">未生成</el-tag>
              <el-tag type="success" v-else-if="String(scope.row.status) === '2'">已生成</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="体检报告号码" width="130" />
          <el-table-column prop="orderNumber" label="体检预约号码" width="130" />
          <el-table-column prop="realname" label="预约人" width="80" />
          <el-table-column prop="phone" label="预约人电话" width="120" />
          <el-table-column prop="sex" label="预约人性别" width="90" :formatter="formatSex"  />
          <el-table-column prop="reportDescription" label="体检报告描述" />
        </el-table>

        <div style="margin: 10px 0">
          <el-pagination
              @size-change="handlePageSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2,5,10,15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">

          </el-pagination>
        </div>
      </el-card>


    </div>
  </el-card>
</template>

<script>

import request from "@/utils/request";
import {getUserId} from "@/utils/storage";
export default {

  data(){
    return{

      //默认设置表格数据位空
      tableData: [],
      //默认设置搜索数据位空
      search:'',
      //分页相应数据绑定
      currentPage:1,//当前页
      pageSize:5,//每页显示数据数
      total:10,//共多少条数据
    }
  },
  created() {
    this.list();//调用list方法
  },
  methods:{
    gotoIndex(){
      this.$router.push("/userLayout");
    },
    formatSex(row) {
      return row.sex === '1' ? '男' : '女' ;
    },
    list() {
      request.get("/api/report/page",{
        params:{//指定请求携带的参数
          page:this.currentPage,
          pageSize:this.pageSize,
          realname:this.search,
          userId: getUserId()
        }}).then(res => {
        console.log("res-",res)
        //绑定 tableData, 显示在表格
        this.tableData =res.data.data.records
        this.total=res.data.data.total
      })
    },
    handleCurrentChange(pageNum){//处理分页请求
      //当用户点击分页超链接时会携带pageNum
      console.log("pageNum",pageNum)
      this.currentPage=pageNum
      //发出分页请求
      this.list()
    },
    handlePageSizeChange(pageSize){
      console.log("pageSize",pageSize)
      this.pageSize=pageSize
      this.list()
    },
  }
}

</script>
<style scoped lang="scss">
.el-table {
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-form {
  margin-top: 0;
}
.disabled-text {
  color: #bac0cd !important;
}
.blueBug {
  color: #419EFF !important;
  position: relative;
}
.addCheck {
  .el-input {
    width: 130px;
  }

  .el-input-number__increase {
    border-left: solid 1px #fbe396;
    background: #fffbf0;
  }

  .el-input-number__decrease {
    border-right: solid 1px #fbe396;
    background: #fffbf0;
  }

  input {
    border: 1px solid #fbe396;
  }

  .table {
    border: solid 1px #ebeef5;
    border-radius: 3px;

    th {
      padding: 5px 0;
    }

    td {
      padding: 7px 0;
    }
  }
}
.addBut {
  background: #ffc200;
  display: inline-block;
  padding: 0px 20px;
  border-radius: 3px;
  line-height: 40px;
  cursor: pointer;
  border-radius: 4px;
  color: #333333;
  font-weight: 500;
}
.blueBug::after {
  content: '';
  position: absolute;
  right: -6px;
  height: 14px;
  width: 0px;
  border-right: solid 1px #EBEEF5 !important;
}

.delBut {
  color: #F56C6C !important;
  position: relative;
}

.delBut::after {
  content: '';
  position: absolute;
  right: -6px;
  height: 14px;
  width: 0px;
  border-right: solid 1px #EBEEF5 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


